"use client"
import React, { useState } from 'react';
import Link from 'next/link';
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Breadcrumb from '../component/mbx';

import {
  BookOutlined,
  UserOutlined,
  VideoCameraOutlined, OrderedListOutlined
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import { link } from 'fs';
import { useRouter } from 'next/navigation';
const { Header, Sider, Content } = Layout;
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});


const Home = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const router = useRouter()

  const routes = [
    {
      key: '/little_jia/dingdan/allding',
      icon: <UserOutlined />,
      label: '回款计划',
    },
    {
      key: '/little_jia/dingdan/mydingdan',
      icon: <VideoCameraOutlined />,
      label: '回款管理',
    },
    {
      key: '/little_jia/dingdan/xiashudingdan',
      icon: <VideoCameraOutlined />,
      label: '发票管理',
    },
    {
      key: '/little_jia/dingdan/woxiezuo',
      icon: <VideoCameraOutlined />,
      label: '费用管理',
    },
    {
      key: '/little_jia/dingdan/xiashuxiezuo',
      icon: <VideoCameraOutlined />,
      label: '报销管理',
    },
  ]


  return (<html lang="en">
    <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
      <Layout style={{ height: "100vh" }}>
        <Sider style={{ background: "#435188" }} collapsed={true}>
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            mode="inline"
            style={{ background: "#435188" }}
            defaultSelectedKeys={['1']}
            onSelect={(i) => {
              router.push(i.key)
            }}
            items={[

              {
                key: "/little_jia",
                icon: <UserOutlined />,
                label: '账本管理',
              }
            ]}
          />
        </Sider>

        <Sider width="150px" style={{ background: "skyblue" }}>
          <div className="demo-logo-vertical" />
          财务管理
          <Menu
            style={{ background: "skyblue" }}
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            onSelect={(i) => {
              router.push(i.key)
            }}
            items={routes}
          />
        </Sider>

        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
            {/* 顶部 */}
            <Breadcrumb />
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </body>
  </html>
  );
};

export default Home;